/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import url("./fonts/inter.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Removes blue tap box over Button/Link on mobile.
 * Issue on Tailwind's repo: https://github.com/tailwindlabs/tailwindcss/discussions/2984
 */
@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: auto;
  }
}

/* Docusaurus stuff */

.blog-list-page {
  background-color: var(--custom-blog-list-background-color);
}

/* Highlight Prisma field types properly */
.token.type-class-name {
  color: rgb(54, 172, 170);
}

.token.annotation {
  color: rgb(116, 116, 116) !important;
}

/* You can override the default Infima variables here. */
:root {
  /* Our custom values */
  --custom-background-color: #fdfdfd;
  --custom-background-color-diff: #f4f4f4;
  --custom-shadow-lw: 0 3px 5px 0px rgba(0, 0, 0, 0.1);
  --custom-border-radius: 3px;
  --custom-border-radius-md: 6px;
  --custom-discord-color: #8a9cff;
  --custom-wasp-color: #ffcc00;
  --ifm-h3-font-size: 1.3rem;

  /* Blog */
  /**
   * TODO(matija): this is a separate value from the background color on the landing page (in custom.css)
   * Shall we unify that?
   **/
  --custom-blog-list-background-color: #f5f5f5;
  --custom-blog-card-timestamp-color: #737373;
  --custom-blog-card-background-color: white;

  /* Infima overrides */
  --ifm-container-width-xl: 1280px;
  --ifm-font-family-base: "Inter", sans-serif;
  --ifm-color-primary: #bf9900;
  /* wasp color (ffcc00) darkened by 25% */
  --ifm-color-primary-dark: #8a6f04;
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
  --ifm-code-background-dark: #292d3e;
  /* NOTE(matija): used this because setting --ifm-code-border-radius did nothing, not sure why. */
  --ifm-global-radius: 0;

  /* TODO(matija): this doesn't seem to override the default value. */
  --ifm-button-background-color: var(--custom-background-color);

  --ifm-button-border-radius: var(--custom-border-radius);
  /* TODO(matija): Also doesn't have effect. */
  --ifm-code-border-radius: var(--custom-border-radius);

  --ifm-heading-font-weight: 600;
  --ifm-h2-font-size: 2rem;

  --ifm-col-spacing-vertical: 0.5rem;
  --docusaurus-highlighted-code-line-bg: #e8edf2;

  /* Docs */
  --ifm-menu-color: var(--ifm-color-gray-800);
  --sidebar-item-level-1-color: var(--ifm-color-primary);
  --sidebar-item-level-1-spacing: 1em;
}

:root[data-theme="dark"] {
  --custom-background-color-diff: #2a2a2a;

  /* Blog */
  --custom-blog-list-background-color: var(--ifm-background-color);
  --custom-blog-card-timestamp-color: #a3a3a3;
  --custom-blog-card-background-color: black;
  --docusaurus-highlighted-code-line-bg: #dee6ed;

  /* Docs */
  --ifm-menu-color: var(--ifm-color-gray-200);
}

/******** DOCS SIDEBAR **********/

/* remove background from sidebar items (except for active) */
.menu__link:not(.menu__link--active),
.menu__list-item-collapsible {
  background: initial !important;
}

/* less opaque on hover/focus */
.menu__link:hover:not(.menu__link--active):not(.menu__link--sublist),
.menu__link:focus:not(.menu__link--active):not(.menu__link--sublist) {
  opacity: 0.7;
}

.theme-doc-sidebar-item-category-level-1,
.theme-doc-sidebar-item-link-level-1 {
  margin-bottom: var(--sidebar-item-level-1-spacing);
}

.theme-doc-sidebar-item-category-level-1
  > .menu__list-item-collapsible
  > .menu__link,
.theme-doc-sidebar-item-link-level-1 > .menu__link {
  color: var(--sidebar-item-level-1-color);
  font-weight: bold;
}

/******** DOCS NAVBAR *********/

/* This hides Docs version dropdown when not on docs (i.e. when we are on blog). */
.navbar__item:has(.navbar-item-docs-version-dropdown:not(.active)) {
  display: none;
}

/******************************/

/******* OTHER ********/

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 1.5rem;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tutorial-image {
  border: 1px solid #ccc;
  border-radius: var(--custom-border-radius);
}
